<template>
	<div class="info">
    <div class="bg" v-if="showBj"></div>
    <img :style="logoSize" class="logo" :src="rst.logoUrl" alt="">
    <h1 @click="handleTitleOpen">{{rst.shopName}}</h1>
    <p>
      <span>评价{{rst.rank}}</span>
      <span>月售{{rst.monthSale}}</span>
      <span>商家配送约{{rst.fastTime}}分钟</span>
    </p>
    <ul>
      <li v-for="(item,index) in rst.preferential" :key="index">
				{{item.full}}减{{item.subtract}}
			</li>
      <li @click.self="handleCheapOpen">3个优惠</li>
    </ul>
    <div class="notice">公告：{{rst.notice}}</div class>
    <fade-animation>
      <div class="detail" v-if="showDetail" @click.self="handleDetailClose">
        <div class="detail-content">
          <h2>{{rst.shopName}}</h2>
          <ul>
            <li>
              <h3>{{rst.rank}}</h3>
              <p>评分</p>
            </li>
            <li>
              <h3>{{rst.monthSale}}单</h3>
              <p>月售</p>            
            </li>
            <li>
              <h3>商家配</h3>
              <p>约{{rst.fastTime}}分钟</p>            
            </li>
            <li>
              <h3>{{rst.deliverCost}}元</h3>
              <p>配送费</p>
            </li>
            <li>
              <h3>{{(rst.distance/1000).toFixed(1)}}km</h3>
              <p>距离</p>            
            </li>
          </ul>
          <div class="detail-content-notice">
            <span>公告</span>
          </div>
          <div class="notice-content-desc">
            {{rst.notice}}
          </div>
        </div>
        <div class="detail-close" @click="handleDetailClose">
          <img src="../../../public/images/close.png" alt="">
        </div>
      </div>
    </fade-animation>
    <up-move>
      <div class="cheap" v-if="showCheap" @click.self="handleCheapClose">
          <div class="cheap-info">
            <h2>优惠活动</h2>
            <ul>
              <li>
                <p>满减</p>
                <p v-for="(item,index) in rst.preferential" :key="index">
									满{{item.full}}减{{item.subtract}}
								</p>
              </li>
              <li></li>
            </ul>
            <div class="cheap-close" @click.self="handleCheapClose">×</div>
          </div>
      </div>
    </up-move>
  </div>
</template>

<script>
import FadeAnimation from '../animation/Fade'
import UpMove from '../animation/UpMove'
  
export default{
	name:'HomeInfo',
	props: ["rst"],
	data(){
		return{
      showBj: false,
      showDetail: false,
      showCheap: false,
			logoSize: {
				width:20 + '%',
				opacity: 1
			}
		}
	},
  components: {
    FadeAnimation,
    UpMove,
  },
	methods:{
		handleScroll(){
			let top = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset
			if( top >= 0 ) {
				let width = 20 - top*0.45
				width = width < 0 ? 0 : width
				if( top <= 0 ) {
					width = 20
				} 
				if( width < 13 ) {
					var opacity = width / 13
          opacity = opacity < 0 ? 0 : opacity
				}
				this.logoSize = {
					width: width + '%',
					opacity
				}
			} 
		},
    handleTitleOpen() {
      this.showDetail = true
    },
    handleDetailClose() {
      this.showDetail = false
    },
    handleCheapOpen() {
      this.showBj = true
      this.showCheap = true
    },
    handleCheapClose() {
      this.showBj = false
      this.showCheap = false

    }
	},
	mounted(){
		window.addEventListener('scroll',this.handleScroll)
	}
}
</script>

<style scoped>
.info{ height: 32vw; background: #fff; margin-top: 31%; padding: 3vw 0 3vw 0;}
.info .bg{ position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 1;}
.info .logo{ width: 20%; position: fixed; left: 0; right: 0; margin: -18.2% auto 0 auto; border-radius: 6px; }
.info h1{ position: relative; z-index: 0; width: 60%; color: #000000; font-size: 6vw; margin: 5vw auto 2px auto;overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.info p span { font-size: 3.3vw; padding: 0 6px;}
.info ul{ margin: 10px auto 3px auto; overflow: hidden; display:inline-block !important; }
.info ul li{ float: left; list-style-type: none; margin: 0 3px; padding: 0 5px; border: 0.1vw solid rgb(255, 75, 51, 0.3); color: rgb(255, 75, 51); font-size: 3.2vw;}
.info ul li:last-child{font-size: 3.2vw; border: 0; color: #666;}
.info > ul li:last-child:after{content: "▼";  padding-left: 6px; color: #333;}
.info .notice{ width: 82%; font-size: 3.3vw; margin: 1vw auto 0 auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #999;}
.detail{ position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 1;}
.detail-content{ width: 80vw; height: 69vw; margin: auto; margin-top: 50vw; background: #fff; padding-top: 6vw; border-radius: 1vw;}
.detail-content h2{ position: relative; width: 76%; font-size: 6vw; margin: 0 auto 2vw auto;}
.detail-content ul li{ border: 0;}
.detail-content ul li h3{ font-size: 4vw;}
.detail-content-notice{background-image: linear-gradient(90deg,#fff,#999 50%,#fff); background-size: 36% 1px;background-position: 50%; background-repeat: no-repeat; margin-top: 2vw;}
.detail-content-notice span{ padding: 2vw; background: #fff; font-size: 3.6vw; }
.notice-content-desc{ line-height: 6vw; font-size: 3.5vw; padding: 3vw 6vw; text-align: left; text-indent: 2em;}
.detail-close{ margin: 6vw auto;}
.detail-close img{ width: 8vw;}
.cheap{ position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 2; }
.cheap-info{ position: absolute; width: 100vw; height: 69vw; background: #fff; bottom: 0; padding-top: 3vw;}
.cheap-info h2{ font-size: 5vw;}
.cheap-info ul{ margin: 2vw 0;}
.cheap-info ul li{ border: 0; width: 83vw; text-align: left; color: #333; font-size: 3vw; }
.cheap-info ul li p:nth-child(1){ display: inline; margin: 0 2vw 0 5vw; padding: 3px 4px; background: rgb(255, 83, 57); font-size: 3.5vw!important; color: #fff; }
.cheap-info ul li p{ display: inline;  padding: 3px 4px; font-size: 3.5vw; color: #333; }
.cheap-close{ position: absolute; right: 3.5vw; top: -0.3vw; font-size: 10vw; z-index: 999; color: #999;}
</style>
